<!--财务账单列表弹窗-->
<template>
	<a-modal v-model:visible="visible" v-bind="option" class="dashboard-dialog">
		<template #title>
			<div>{{ title }}</div>
			<div id="dialog_header_search" />
		</template>
		<component v-if="component" :is="components[component]" :query="query" source="dialog" search-container="#dialog_header_search" />
	</a-modal>
</template>

<script lang="ts" setup>
	import {computed, defineAsyncComponent, onMounted, onUnmounted, reactive, ref} from 'vue'
	import {MicroAppName, microApps} from '@/micros/apps'
	import XEUtils from 'xe-utils'

	const props = withDefaults(
		defineProps<{
			title: string
			name?: MicroAppName
			path?: string
			query: any
			component?: string
		}>(),
		{
			query: {}
		}
	)

	// @ts-ignore
	const query = computed(() => XEUtils.pick(props.query, v => v != null))

	const components = {
		// 账单列表
		contractBill: defineAsyncComponent(() => import('@/pages/finance/contract-bill/index.vue')),
		// 租客预定列表
		renterReserve: defineAsyncComponent(() => import('@/pages/contract/reserve/index.vue')),
		// 租客合同列表
		renterContract: defineAsyncComponent(() => import('@/pages/contract/tenant/index.vue')),
		// 租客退租申请
		renterQuit: defineAsyncComponent(() => import('@/pages/contract/change/quit.vue')),
		// 租客转租申请
		renterSubletting: defineAsyncComponent(() => import('@/pages/contract/change/subletting.vue')),
		// 租客换房申请
		renterExchange: defineAsyncComponent(() => import('@/pages/contract/change/exchange.vue')),
		// 租客续租申请
		renterRenewal: defineAsyncComponent(() => import('@/pages/contract/change/renewal.vue')),
		// 预警弹窗
		warningDialog: defineAsyncComponent(() => import('@/components/warning/index.vue')),
		// 能耗费预警
		alertList: defineAsyncComponent(() => import('@/pages/finance/energy-consumption/alert-list.vue')),
		// 设备弹窗
		deviceDialog: defineAsyncComponent(() => import('@/components/warning/index.vue')),
		// 业主合同列表
		ownerContractList: defineAsyncComponent(() => import('@/pages/contract/owner/index.vue')),
		// 业主合同待签约
		ownerContractToSigned: defineAsyncComponent(() => import('@/components/dialog/to-signed.vue')),
		//发票历史
		billingHistory: defineAsyncComponent(() => import('@/pages/finance/invoice-administration/billing-history/index.vue')),
		// 账单明细
		billDetails: defineAsyncComponent(() => import('@/pages/finance/bill-detail/index.vue'))
	}

	const visible = ref<boolean>(true)

	const emits = defineEmits(['close'])
	const option = reactive({
		footer: null,
		width: '95%',
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		onCancel() {
			emits('close')
		}
	})

	onMounted(() => {
		if (props.path && props.name) {
			microApps.loadApp({
				name: props.name,
				props: {
					path: props.path,
					query: props.query,
					searchContainer: '#dialog_header_search'
				},
				container: '.dashboard-dialog .ant-modal-body'
			})
		}
	})

	onUnmounted(() => {
		if (props.name) {
			microApps.removeApp(props.name)
		}
	})
</script>

<style lang="less">
	.dashboard-dialog {
		overflow: hidden;

		.ant-modal-header {
			height: 55px;
			padding: 11px 24px;

			& > .ant-modal-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				#dialog_header_search {
					min-width: 600px;
					margin-right: 30px;
					font-weight: normal;
				}
			}
		}

		.ant-modal-body {
			height: 90vh;
			padding: 12px;
			min-height: 600px;
			background: #eff1f7;
		}
	}
</style>
